<template>
  <div class="flow-row">
    <div class="flow-branch">
      <div class="branch-node" @click="!readable && addBranch(node)">
        <img :src="branchPlusIcon"/>
      </div>
      <el-button class="branch-node" @click="!readable && addBranch(node)" round>添加分支</el-button>
      <div class="meet-node"></div>
      <div class="flow-col" v-for="(branch, index) in node.branchs" :key="branch.id">
        <div class="clear-left-border" v-if="index == 0"></div>
        <div class="clear-right-border" v-if="node.branchs.length - 1 == index"></div>
        <div class="flow-row">
          <div class="flow-box">
            <div class="flow-item flow-node-branch" @click="!readable && open('flowBranchSetting', branch)">
              <div class="flow-node-box" :class="{ 'has-error': branch.config.error }">
                <div class="node-name">
                  <EditName v-model:value="branch.name"/>
                  <!--                  <img :src="parallelIcon" style="margin-left: 10px" />-->
                </div>
                <div class="node-main">
                  <span v-if="branch.content">
                    {{ branch.content }}
                  </span>
                  <span v-else class="hint-title">配置筛选条件</span>
                </div>
                <!-- 错误提示 -->
                <i v-if="branch.error" type="exclamation-circle" theme="filled"
                   class="node-error el-icon-warning-outline"></i>

                <div v-if="!readable && !branch.config.deletable" class="close-icon">
                  <!-- <i class="el-icon-circle-close" @click.stop="branch.config.deletable = true"/> -->
                  <el-icon class="el-icon-circle-close"  @click.stop="delNode(branch)"><CircleClose /></el-icon>
                </div>
                <!-- 删除提示 -->
                <DeleteConfirm :node="branch"/>
              </div>
            </div>
            <FlowAddNode :node="node" @update:node="node = $event" :nodeType="3" :id="branch.id"
                         :readable="readable"/>
          </div>
        </div>
        <FlowNode v-if="branch.childNode && branch.childNode.hasOwnProperty('name')"
                  :node="branch.childNode" :readable="readable"/>
      </div>

      <div class="branch-end-node">
        <img :src="branchPlusIcon"/>
      </div>

    </div>
    <div class="after-branch-btn">
      <!-- <FlowAddNode :node="node.childNode" @update:node="node.childNode = $event" :nodeType="4" :read="read"/> -->
    </div>
    <!-- <FlowBranchSetting ref="flowBranchSetting" @close="isActive = false" /> -->
  </div>
</template>
<script setup name="FlowConcurrentNode">

// import { flowMixin } from '../../mixins/flowMixin';
import FlowNode from './FlowNode.vue';
import FlowAddNode from '../flowAddNode.vue';
// import FlowBranchSetting from '../../FlowDrawer/Branch/index.vue';
import EditName from '../../../common/EditName.vue';
import DeleteConfirm from '../../../common/DeleteConfirm.vue';
import {createApp, defineProps} from 'vue';
import flowhook from '../../../mixins/flowhook';

const app = createApp();

import {useStore} from "vuex";
/* 组件局部注册 */
const store = useStore();

const {uuid, nameClass, branchPlusIcon, open} = flowhook();

defineProps({
  node: {
    type: Object,
    default: function () {
      return {};
    },
  },
  readable: {
    type: Boolean,
    default: false,
  },
})

/**
 * 添加分支节点
 * @param {*} node
 */

const addBranch = (node) => {
  console.log("store------------------dispatch:", store);
  store.dispatch("process/addBranch", node);
};

const delNode = (node) => {
  store.dispatch("process/delNode", node);
}


</script>
